<template>
    <!-- 红外布撤防设置页 -->
    <div>
        <div class="infrared_card">
            <el-form>
                <el-form-item
                    label="红外："
                    label-width="150px">
                    <span :class="infraredenable ? '':'fangshi'">一键撤防</span>
                    <el-switch
                        v-model="infraredenable"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="infraredenableSwitch">
                    </el-switch>
                    <span :class="infraredenable ? 'fangshi':''">一键布防</span>
                </el-form-item>
                <el-form-item label="添加关联设备节点：" 
                    label-width="150px">
                    <el-cascader v-model="cascader" :options="options" @change="cascaderDoaddr"></el-cascader>
                </el-form-item>
                <el-form-item label="已选择设备节点：" 
                    label-width="150px">
                    <div class="infrared">
                        <div v-for="(item,index) in infrared" :key="index" class="infrareditem">
                            <div class="infrared_item">
                                <span>{{item.text}}</span>
                                <div class="infrared_delet" @click="infraredDelet(item,index)">X</div>
                            </div>
                            
                        </div>
                    </div>
                </el-form-item>
                
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return{
            infraredenable:true,
            cascader:[],//当前选中设备节点
            cascaderProps: {
                label: 'label',
                value: 'value',
                children: 'children',
            },
            options:[],//403 数据采集器 数据树
            infrared:[],//已选设备节点
        }
    },
    created() {
        this.getinfraredinfo()
        this.getdevlist()
    },
    methods: {
        getinfraredinfo(){
            var params = {
                "getinfraredinfo":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.getinfraredinfo != undefined){
                    this.infraredenable = res.data.getinfraredinfo.infraredenable
                    var infraredlist = res.data.getinfraredinfo.infraredlist
                    for(var i = 0; i < infraredlist.length; i++){
                        var str = {
                            'uid':infraredlist[i].uid,
                            'id':infraredlist[i].id,
                            'text':infraredlist[i].name+'/'+infraredlist[i].idname
                        }
                        this.infrared.push(str)
                    }
                    
                    
                }
            })
        },
        // 获取声光报警设备绑定子项
        getdevlist(){//获取402和数据采集器10、11、12、13 控制子项
            var params = {
                "getdevlist":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                var list = res.data.getdevlist;
                this.options = []
                for(var i = 0; i < list.length; i++){
                    if(list[i].type == 23 || list[i].type == 25){
                        for(var a = 0; a < list[i].devlink.length; a++){
                            var str = {
                                value:list[i].devlink[a].uid,
                                label:list[i].devlink[a].name,
                                type:list[i].type,
                                children:[]
                            }
                            this.options.push(str)
                            var params2 = {
                                "getdevinfo":[
                                    {
                                    "uid": list[i].devlink[a].uid,
                                    "type": list[i].type,
                                    "addr": list[i].devlink[a].addr,
                                    "unittype":"id-name-ready"
                                    }
                                ],
                                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                            }
                            this.$http.post(this.$baseUrl, params2).then((res) => {
                                var devinfo = res.data.getdevinfo[0]
                                for(var b = 0; b < this.options.length; b++){
                                    if(this.options[b].value == devinfo.uid){
                                        if(this.options[b].type == 25){ //数据采集器  10、11、12、13
                                            for(var c = 0; c < 10; c++){
                                                if(devinfo.unit[c].ready == 1){
                                                    var unit = {
                                                        value:devinfo.unit[c].id,
                                                        label:devinfo.unit[c].name,
                                                    }
                                                    this.options[b].children.push(unit)
                                                }
                                            } 
                                        }else{//402
                                            for(var c = 0; c < devinfo.unit.length; c++){
                                                if(devinfo.unit[c].ready == 1){
                                                    var unit = {
                                                        value:devinfo.unit[c].id,
                                                        label:devinfo.unit[c].name,
                                                    }
                                                    this.options[b].children.push(unit)
                                                }
                                            } 
                                        }
                                        
                                    }
                                }
                            })
                        }
                    }
                }
            })
        },
        //红外开关
        infraredenableSwitch(data){
            var params = {
                'setinfraredenable':data,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                if(res.data.result == 'ok' ){
                    this.$notify({
                        title: '操作成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '操作失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            })
        },
        //添加绑定的信息
        cascaderDoaddr(){
            var text = ''
            this.cascader.map(value => {
                let currentOption = this.options;
                this.cascaderProps.value.split('.').forEach(key => {
                    currentOption = currentOption.find(option => option[key] === value);
                    if(currentOption != undefined){
                        text = currentOption.label
                        for(var i = 0; i < currentOption.children.length; i++){
                            if(this.cascader[1] == currentOption.children[i].value){
                                text = text +'/'+currentOption.children[i].label
                            }
                        }
                    }
                    
                });
            });
            var str = {
                'uid':this.cascader[0],
                'id':this.cascader[1],
                'text':text
            }
            var num = 0
            for(var y = 0; y < this.infrared.length; y++){
                if(this.infrared[y].uid == this.cascader[0] && this.infrared[y].id == this.cascader[1]){
                    this.$notify({
                        title: '该节点已被添加过',
                        type: 'warning',
                        duration: 1500
                    });
                    num = 1
                }else{
                    
                }
            }
            if(num == 0){
                var st = []
                for( var a = 0; a < this.infrared.length; a++){
                    var arr = {
                        'uid':this.infrared[a].uid,
                        'id':this.infrared[a].id,
                    }
                    st.push(arr)
                }
                //最新添加的
                st.push({'uid':this.cascader[0],
                'id':this.cascader[1],})
                var params = {
                    'setinfraredlist':st,
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.$http.post(this.$baseUrl,params).then((res)=>{
                    if(res.data.result == 'ok' ){
                        this.infrared.push(str)
                        this.$notify({
                            title: '添加成功',
                            type: 'success',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '添加失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                })
            }
            this.cascader = []
        },
        //删除
        infraredDelet(item,index){
            var st = []
            for( var a = 0; a < this.infrared.length; a++){
                var arr = {
                    'uid':this.infrared[a].uid,
                    'id':this.infrared[a].id,
                }
                st.push(arr)
            }
            st.splice(index, 1)
            var params = {
                'setinfraredlist':st,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                if(res.data.result == 'ok' ){
                    this.infrared.splice(index, 1)
                    this.$notify({
                        title: '删除成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '删除失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            })
        }
    },
    beforeDestroy() {
    }
}
</script>

<style scoped>
.infrared_card{
    padding-top: 20px;
    padding-left: 40px;
}
.fangshi{
    color: #ffb700;
}
.infrared{
    width: 1000px;
    min-height: 200px;
    color: #fff;
    border: 1px solid #ffffff52;
    background: #738eb00d;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-left: 30px;
}
.infrared_item{
    min-width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #3b4e5e;
    margin-right: 30px;
    padding: 0px 10px;
    border-radius: 5px;
    position: relative;
}
.infrared_delet{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #848383;
    cursor: pointer;
    transition: transform .5s;
}
.infrared_delet:hover{
    transform: scale(1.2);
}
</style>